<template>
  <div>
    <el-dialog
      v-model="show"
      :title="'字段参数配置：' + fieldInfo.field_name"
      align-center
      draggable
      width="60%"
      @keydown.prevent.enter="updateComplete"
    >
      <el-tabs v-model="activeName" class="demo-tabs" style="margin-top: -25px" @tab-click="handleClick">
        <el-tab-pane class="px-4" label="基础配置" name="first">
          <div class="flex items-center justify-between">
            <el-form-item label="字段Label标签:" prop="delivery">
              <el-input v-model="fieldInfo.label" />
            </el-form-item>
            <span> 当前编辑字段：{{ fieldInfo.field_name }} </span>
          </div>
          <el-form-item label="是否为信息字段:" prop="delivery">
            <el-switch v-model="fieldInfo.dto_config.is_info" />
          </el-form-item>
          <el-form-item label="是否为创建字段:" prop="delivery">
            <el-switch v-model="fieldInfo.dto_config.is_create" />
          </el-form-item>
          <el-form-item label="是否为更新字段:" prop="delivery">
            <el-switch v-model="fieldInfo.dto_config.is_update" />
          </el-form-item>
          <!--        <el-form-item label="是否为删除字段:" prop="delivery">-->
          <!--          <el-switch v-model="fieldInfo.dto_config.is_delete"/>-->
          <!--        </el-form-item>-->
        </el-tab-pane>
        <el-tab-pane class="px-4" label="编辑页配置" name="second">
          <el-form :inline="false" class="demo-form-inline">
            <el-form-item label="必填字段:" prop="delivery">
              <el-switch v-model="fieldInfo.edit_config.form_required" />
            </el-form-item>
            <el-form-item label="输入类型:" prop="delivery">
              <el-input v-model="fieldInfo.edit_config.form_type" />
            </el-form-item>
          </el-form>
        </el-tab-pane>
        <el-tab-pane class="px-4" label="列表页配置" name="third">
          <el-form :inline="false" class="demo-form-inline">
            <el-form-item label="是否显示:" prop="delivery">
              <el-switch v-model="fieldInfo.cols_config.isShow" />
            </el-form-item>
            <el-form-item label="列宽度：" prop="delivery">
              <el-input v-model="fieldInfo.cols_config.width" placeholder="非必填" />
            </el-form-item>
            <el-form-item label="对其方式:" prop="delivery">
              <el-input v-model="fieldInfo.cols_config.align" />
            </el-form-item>
          </el-form>
        </el-tab-pane>

        <el-tab-pane class="px-4" label="搜索配置" name="fourth">
          <el-form :inline="false" class="demo-form-inline">
            <el-form-item label="表单类型:" prop="delivery">
              <el-input v-model="fieldInfo.search_config.form_type" />
            </el-form-item>
            <el-form-item label="表单列宽:" prop="delivery">
              <el-input v-model="fieldInfo.search_config.span" />
            </el-form-item>
            <el-form-item label="默认值：" prop="delivery">
              <el-input v-model="fieldInfo.search_config.default_value" />
            </el-form-item>
          </el-form>
        </el-tab-pane>
      </el-tabs>

      <hr />
      <div class="mt-2 text-right">
        <el-button type="primary" @click="updateComplete">完成修改</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script lang="ts" setup>
import { ref } from "vue";
import { FieldInfo } from "@/api/interface/Generation/FieldInfo";
import { ElMessage, TabsPaneContext } from "element-plus";

let fieldInfo = ref<FieldInfo>({} as FieldInfo);
let show = ref(false);
const ShowPop = (fieldInfo_: any) => {
  show.value = true;
  fieldInfo.value = fieldInfo_;
  console.log(fieldInfo, " ---fieldInfo");
};

defineExpose({ ShowPop });
let emits = defineEmits(["fieldUpdate"]);
const updateComplete = () => {
  emits("fieldUpdate", fieldInfo.value);
  show.value = false;
  ElMessage({ type: "success", message: "点击保存配置按钮后完成修改" });
};

const activeName = ref("first");
const handleClick = (tab: TabsPaneContext, event: Event) => {
  // console.log(tab, event)
};
</script>

<style lang="scss" scoped>
.demo-form-inline .el-input {
  --el-input-width: 180px;
}

.demo-tabs > .el-tabs__content {
  padding: 32px;
  color: #6b778c;
  font-size: 32px;
  font-weight: 600;
}
</style>
